<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Color Palette - Puppertino Framework</title>
    <link
      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;900&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
    />
    <link rel="stylesheet" type="text/css" href="../dist/css/full.css" />
    <link rel="stylesheet" type="text/css" href="../dist/css/color_palette.css" />
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="doc.css" />
    <meta
      name="description"
      content="This is the documentation for Icons on the Puppertino Framework, a framework that mimics Apple's design, woof!"
    />
    <link rel="icon" type="image/png" href="../landing-images/doggo.png" />
  </head>
  <body class="p-layout">
    <div class="route">
      <a
        href="https://codedgar.github.io/Puppertino/"
        class="p-btn p-btn-scope p-btn-scope-unactive"
        >Puppertino</a
      >
      <p>/</p>
      <a href="index.html" class="p-btn p-btn-scope p-btn-scope-unactive"
        >Examples</a
      >
      <p>/</p>
      <a href="color_palette.html" class="p-btn p-btn-scope">Color Palette</a>
    </div>
    <h1>Color Palette</h1>
    <div class="master">
      <p>
        Colors are amazing, but if you don't know what colors to use or need a
        great palette, Puppertino has you covered. We have taken these beautiful
        colors from
        <a
          href="https://elementary.io/es/docs/human-interface-guidelines#color"
          target="_blank"
          >Elementary guidelines</a
        >. You can use the color palette component using the
        <a
          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/color_palette.css"
          target="_blank"
          >CSS of color palette</a
        >
        or
        <a
          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/full.css"
          target="_blank"
          >dowloading the full CSS</a
        >
        (Not recommended if you are just going to use this component).
      </p>

      <div class="talk-about-it">
        <h2>General colors</h2>
        <p>
          Currently Puppertino consists of
          <strong>12 color palettes</strong> which you can choose from. To use
          them just click on them and the class for the color will be copied to
          your clipboard! Alternatively, find the color you want to use, add
          <code class="code">p-</code>, the color and, the shade you want to
          use, i.e: <code class="code">p-strawberry-100</code> (Base colors
          don't use shade).<br><br>
          There are also <strong>text colors</strong>, just add <code class="code">-color</code> at the end, i.e <code class="code">p-strawberry-100-color</code>
        </p>

        <div class="row pad_15_row center_row">
          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-strawberry">
              <h2 class="col-w">Strawberry</h2>
            </div>
            <div class="color_base h-50 p-strawberry-900">
              <p class="col-w">900</p>
            </div>
            <div class="color_base h-50 p-strawberry-700">
              <p class="col-w">700</p>
            </div>
            <div class="color_base h-50 p-strawberry-500">
              <p class="col-w">500</p>
            </div>
            <div class="color_base h-50 p-strawberry-300">
              <p class="col-b">300</p>
            </div>
            <div class="color_base h-50 p-strawberry-100">
              <p class="col-b">100</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-orange">
              <h2 class="col-w">Orange</h2>
            </div>
            <div class="color_base h-50 p-orange-900">
              <p class="col-w">900</p>
            </div>
            <div class="color_base h-50 p-orange-700">
              <p class="col-w">700</p>
            </div>
            <div class="color_base h-50 p-orange-500">
              <p class="col-w">500</p>
            </div>
            <div class="color_base h-50 p-orange-300">
              <p class="col-b">300</p>
            </div>
            <div class="color_base h-50 p-orange-100">
              <p class="col-b">100</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-banana">
              <h2 class="col-w">Banana</h2>
            </div>
            <div class="color_base h-50 p-banana-900">
              <p class="col-w">900</p>
            </div>
            <div class="color_base h-50 p-banana-700">
              <p class="col-w">700</p>
            </div>
            <div class="color_base h-50 p-banana-500">
              <p class="col-w">500</p>
            </div>
            <div class="color_base h-50 p-banana-300">
              <p class="col-b">300</p>
            </div>
            <div class="color_base h-50 p-banana-100">
              <p class="col-b">100</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-lime">
              <h2 class="col-w">Lime</h2>
            </div>
            <div class="color_base h-50 p-lime-900">
              <p class="col-w">900</p>
            </div>
            <div class="color_base h-50 p-lime-700">
              <p class="col-w">700</p>
            </div>
            <div class="color_base h-50 p-lime-500">
              <p class="col-w">500</p>
            </div>
            <div class="color_base h-50 p-lime-300">
              <p class="col-b">300</p>
            </div>
            <div class="color_base h-50 p-lime-100">
              <p class="col-b">100</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-mint">
              <h2 class="col-w">Mint</h2>
            </div>
            <div class="color_base h-50 p-mint-900">
              <p class="col-w">900</p>
            </div>
            <div class="color_base h-50 p-mint-700">
              <p class="col-w">700</p>
            </div>
            <div class="color_base h-50 p-mint-500">
              <p class="col-w">500</p>
            </div>
            <div class="color_base h-50 p-mint-300">
              <p class="col-b">300</p>
            </div>
            <div class="color_base h-50 p-mint-100">
              <p class="col-b">100</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-blueberry">
              <h2 class="col-w">Blueberry</h2>
            </div>
            <div class="color_base h-50 p-blueberry-900">
              <p class="col-w">900</p>
            </div>
            <div class="color_base h-50 p-blueberry-700">
              <p class="col-w">700</p>
            </div>
            <div class="color_base h-50 p-blueberry-500">
              <p class="col-w">500</p>
            </div>
            <div class="color_base h-50 p-blueberry-300">
              <p class="col-b">300</p>
            </div>
            <div class="color_base h-50 p-blueberry-100">
              <p class="col-b">100</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-grape">
              <h2 class="col-w">Grape</h2>
            </div>
            <div class="color_base h-50 p-grape-900">
              <p class="col-w">900</p>
            </div>
            <div class="color_base h-50 p-grape-700">
              <p class="col-w">700</p>
            </div>
            <div class="color_base h-50 p-grape-500">
              <p class="col-w">500</p>
            </div>
            <div class="color_base h-50 p-grape-300">
              <p class="col-b">300</p>
            </div>
            <div class="color_base h-50 p-grape-100">
              <p class="col-b">100</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-bubblegum">
              <h2 class="col-w">Bubblegum</h2>
            </div>
            <div class="color_base h-50 p-bubblegum-900">
              <p class="col-w">900</p>
            </div>
            <div class="color_base h-50 p-bubblegum-700">
              <p class="col-w">700</p>
            </div>
            <div class="color_base h-50 p-bubblegum-500">
              <p class="col-w">500</p>
            </div>
            <div class="color_base h-50 p-bubblegum-300">
              <p class="col-b">300</p>
            </div>
            <div class="color_base h-50 p-bubblegum-100">
              <p class="col-b">100</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-cocoa">
              <h2 class="col-w">Cocoa</h2>
            </div>
            <div class="color_base h-50 p-cocoa-900">
              <p class="col-w">900</p>
            </div>
            <div class="color_base h-50 p-cocoa-700">
              <p class="col-w">700</p>
            </div>
            <div class="color_base h-50 p-cocoa-500">
              <p class="col-w">500</p>
            </div>
            <div class="color_base h-50 p-cocoa-300">
              <p class="col-b">300</p>
            </div>
            <div class="color_base h-50 p-cocoa-100">
              <p class="col-b">100</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-silver">
              <h2 class="col-w">Silver</h2>
            </div>
            <div class="color_base h-50 p-silver-900">
              <p class="col-w">900</p>
            </div>
            <div class="color_base h-50 p-silver-700">
              <p class="col-w">700</p>
            </div>
            <div class="color_base h-50 p-silver-500">
              <p class="col-w">500</p>
            </div>
            <div class="color_base h-50 p-silver-300">
              <p class="col-b">300</p>
            </div>
            <div class="color_base h-50 p-silver-100">
              <p class="col-b">100</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-slate">
              <h2 class="col-w">Slate</h2>
            </div>
            <div class="color_base h-50 p-slate-900">
              <p class="col-w">900</p>
            </div>
            <div class="color_base h-50 p-slate-700">
              <p class="col-w">700</p>
            </div>
            <div class="color_base h-50 p-slate-500">
              <p class="col-w">500</p>
            </div>
            <div class="color_base h-50 p-slate-300">
              <p class="col-b">300</p>
            </div>
            <div class="color_base h-50 p-slate-100">
              <p class="col-b">100</p>
            </div>
          </div>

          <div class="col-xs-10 col-sm-3">
            <div class="color_base h-50 p-dark">
              <h2 class="col-w">Dark</h2>
            </div>
            <div class="color_base h-50 p-dark-900">
              <p class="col-w">900</p>
            </div>
            <div class="color_base h-50 p-dark-700">
              <p class="col-w">700</p>
            </div>
            <div class="color_base h-50 p-dark-500">
              <p class="col-w">500</p>
            </div>
            <div class="color_base h-50 p-dark-300">
              <p class="col-b">300</p>
            </div>
            <div class="color_base h-50 p-dark-100">
              <p class="col-b">100</p>
            </div>
          </div>
        </div>
      </div>

      <input id="textarea_color" />
    </div>


    <div class="copy_correct">
      <p class="p-caption">Color <span id="color_talk"></span> copied!</p>
    </div>
  </body>
  <script type="text/javascript">
    var color_base = document.querySelectorAll(".color_base");
    for (var item of color_base) {
      item.addEventListener("click", function (event) {
        event.preventDefault();
        var color_actual = this.classList[this.classList.length - 1];
        console.log(color_actual);
        document.getElementById("textarea_color").value = "";
        document.getElementById("textarea_color").value = color_actual;
        document.querySelector("#textarea_color").select();
        document.execCommand("copy");
        document.querySelector("#color_talk").classList.add(color_actual);
        document.querySelector("#color_talk").textContent = color_actual;
        document.querySelector(".copy_correct").classList.add("active");
        setTimeout(function () {
          document.querySelector(".copy_correct").classList.remove("active");
          setTimeout(function () {
            document.querySelector("#color_talk").className = "";
          }, 200);
        }, 700);
      });
    }
  </script>

  
</html>
